<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    

    <style>
        /* 总体模板 */
        * {
            margin: 0;
            padding: 0;
            /* overflow: hidden; */

        }

        /* 核心样式 */
        .container {
            scroll-snap-type: y mandatory;
            /* 需要把滚动条设置到直接父容器，
                scroll-snap-type 才能生效，
                默认是在 body 上，现在是 main 上 */
            overflow: scroll;
            overflow-x: hidden;
            height: 100vh;
        }

        .page1,
        .page2,
        .page3,
        .page0,
        .page4 {
            width: 100vw;
            height: 100vh;
            scroll-snap-align: center;
            display: grid;
            place-items: center;
            font-size: 2em;
            background: rgb(200, 200, 200);
        }

        .switch {
            position: fixed;
            top: 30%;
            right: 100px;
            z-index: 999;
        }

        .switchButton {
            cursor: pointer;
            color: white;
            margin-top: 30px;
        }

   
        .switchButton::before {
            position: fixed;
            /* display: block; */
            width: 29px;
            height: 29px;
            transform: translate(-24%, -25%);
            /* top: 50%;
            left: 50%; */
            border-radius: 50%;
            /* filter: blur(44%); */
            background: #ffffff;
            opacity: 0.3;
            content: '';
            pointer-events: none;
            z-index: -99;
        }

        .circle {
            width: 14px;
            height: 14px;
            background: #ffffff;
            border-radius: 50%;
        }
    </style>

    <style>
        .page1 {
            /* background: rgb(red, green, blue); */
        }

        /* 第一屏 */
        .main_video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -999;
        }
        .page1_text{
            position: absolute;
            top: 50px;
            /* left: 40px; */
            
        }
    </style>
    <style>
        /* 头部 */
        .header {
            /* overflow: hidden; */
            top: 0;
            left: 0;    
            right: 0;
            position: fixed;
            width: 91%;
            background: rgb(206, 210, 210,0);
            height: 60px;
            /* padding: 20px 40px; */
            display: flex;
            justify-content: space-between;
            margin: 0 auto;
            align-items: center;
            color: #ffffff;
            font-size: 1rem;
            z-index: 9999;
        }

        /* 这里也有意思，还搞了一个100% */
        .nav {
            width: 100%;
            display: flex;
            justify-content: flex-end;
            position: relative;
            /* justify-content: center; */
        }

        .nav_item {
            /* margin: 0px 24px; */
            padding: 10px 20px;
            border-bottom: 1px solid transparent;
            position: relative;
            z-index: 9999;
        }

        /* 这里花了我贼多时间 */
        .header_logo {
            position: relative;
            width: 100px;
            top: 35%;
            left: 0;
            transform: translateY(-50%);

        }

        .header_logo img {
            width: 100%;
        }

        @keyframes underline_display {
            0% {
                border-bottom: 1px solid transparent;
            }

            100% {
                border-bottom: 1px solid rgb(255, 255, 255);
            }
        }

        /* .nav_item::after */
        .nav_item:hover {
            animation-name: underline_display;
            animation-duration: 0.5s;
            /*第三个参数是运动曲线*/
            animation-timing-function: cubic-bezier(0.0, 0.0, 1.0, 1.0);

            animation-fill-mode: forwards;
        }



        .nav_ {
            display: flex;
            position: relative;
        }


        .nav_item_underline {
            animation-name: underline_display;
            /* border-bottom: 1px solid black ; */
        }

       

        .nav_item_children {
            /* display: block; */
            /* flex-direction: column; */
            position: absolute;
            left: -20px;
            top: 60px;
            /* display: none; */
        }

        .nav_item_children_item {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 120px;
            height: 50px;
            align-items: centers;

            background: rgb(255, 255, 255);
            color: rgb(0, 0, 0, 0.6);
        }
    </style>
</head>

<body>
    <div class="switch">
        <!-- ⚪  ⚫-->
        <div class="switchButton" index="0">
            <div class="circle" index="0"></div>
        </div>
        <div class="switchButton" index="1">
            <div class="circle" index="1"></div>
        </div>
        <div class="switchButton" index="2">
            <div class="circle" index="2"></div>
        </div>
        <div class="switchButton" index="3">
            <div class="circle" index="3"></div>
        </div>
        <div class="switchButton" index="4">
            <div class="circle" index="4"></div>
        </div>
    </div>
    <div class="container">

        <div class="page0">
            <div class="header">

                <div class="header_logo">
                    <a href=""><img
                            src="https://www.google.com.hk/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
                            alt=""></a>
                </div>
                <div class="nav">
                    <div class="nav_">
                        <div class="nav_item ">
                            <div class="nav_item_text">开始</div>
                            <!-- <div class="nav_item_children">
                        <div class="nav_item_children_item">
                            虚拟人
                        </div>
                        <div class="nav_item_children_item">
                            虚拟人
                        </div>
                        <div class="nav_item_children_item">
                            虚拟人
                        </div>
                        <div class="nav_item_children_item">
                            虚拟人
                        </div>
                    </div> -->

                        </div>
                        <div class="nav_item">
                            <div class="nav_item_text">开始1</div>
                  
                            <div class="nav_item_children">
                                <div class="nav_item_children_item">
                                    虚拟人
                                </div>
                                <div class="nav_item_children_item">
                                    虚拟人
                                </div>
                                <div class="nav_item_children_item">
                                    虚拟人
                                </div>
                                <div class="nav_item_children_item">
                                    虚拟人
                                </div>
                            </div>
                        </div>
                        <div class="nav_item">开12始</div>
                        <div class="nav_item">开12始</div>
                        <div class="nav_item">开12始</div>
                        <div class="nav_item">开12始</div>
                        <div class="nav_item">开12始</div>
                        <div class="nav_underline"></div>
                    </div>

                </div>
            </div>

            <div class="main" style="width: 100%;height:100% ;overflow: hidden;">
                <video class="main_video" loop autoplay muted
                    src="https://www.faceunity.com/uploadfile/upfiles/20220505102707627335fb1602e.mp4"></video>
                    <div class="page1_text">
                        <div class="page_text_main">搭建元宇宙核心资产</div>
                        <div class="page1_text_side">BUILDING THE CODE ASSETS OF METAVERSE</div>
                        <div class="page_text_main">搭建元宇宙核心资产</div>
                        <div class="page1_text_side">CREATING A NEW ENGINE OF DIGITAL ECONOMY</div>
                    </div>
                </div>
            
           


        </div>


        <div class="page1">页面二</div>
        <div class="page2">页面三</div>
        <div class="page3">页面四</div>
        <div class="page4">页面五（上下滚动也行）</div>

    </div>
    <script>
        document.querySelector(".switch").addEventListener("click", (v) => {
            let index = v.target.getAttribute("index")
            document.querySelector(".page" + index).scrollIntoView({
                behavior: "smooth",// 平滑过渡
                block: "start", //垂直方向的对齐
                inline: "start"
            })
            console.log(v.target)
        }, false)



    </script>
</body>

</html>